<script setup lang="ts">
import Login1 from "@/pages/UserModule/Login.vue";
import Register from "@/pages/UserModule/Register.vue";
import {authUtilStore} from "@/utils/authStore";

const authStore = authUtilStore();
</script>

<template>
  <img src="/login-bg-5.jpg" alt="" class="bg-img"/>
  <div class="container">
    <div class="logo-container">
      <img src="/loginBck2.png" alt="" class="loginBckImg"/>
      <img src="/loginBck1.png" alt="" class="loginBckImg1"/>
      <button @click="authStore.toggleAuthMode()" class="toggle-btn">
        {{ authStore.isRegister ? '去登录' : '去注册' }}
      </button>
    </div>
    <div class="form-container">
      <Login1 v-if="!authStore.isRegister"/>
      <Register v-else/>
    </div>
  </div>
</template>
<style scoped>
.bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  box-shadow: 0 4px 10px rgb(226, 226, 226);
}

.toggle-btn {
  background: #fff;
  color: #a262ad;
  border: 1px solid #d3b7d8;
  width: 110px;
  height: 35px;
  letter-spacing: 5px;
  font-size: 20px;
  border-radius: 2px;
}

.toggle-btn:hover {
  background: #8baeff;
  color: #f6f6f6;
}

.loginBckImg1 {
  width: 80%;
  object-fit: cover;
  margin-bottom: 50px;
}

.loginBckImg {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.container {
  border: 1px solid #ccc;
  width: 60%;
  height: 70vh;
  margin: 15vh auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 20px rgb(255, 255, 255);
}

.form-container {
  width: 40.5%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logo-container {
  position: relative;
  width: 59.5%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>

